<!-- 污染类型管理标签页内容 -->
<div class="pollution-types-tab-content">

    <!-- 操作按钮区域 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex flex-wrap gap-4 items-center justify-between">
            <div class="flex flex-wrap gap-2">
                <button onclick="showCreatePollutionTypeModal()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors">
                    <i class="fas fa-plus mr-2"></i>新增类型
                </button>
                <button onclick="showBatchCreateModal()" class="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 transition-colors">
                    <i class="fas fa-layer-group mr-2"></i>批量新增
                </button>
                <button onclick="showImportModal()" class="bg-purple-500 text-white px-4 py-2 rounded-md hover:bg-purple-600 transition-colors">
                    <i class="fas fa-file-import mr-2"></i>导入Excel
                </button>
                <button onclick="exportPollutionTypes()" class="bg-indigo-500 text-white px-4 py-2 rounded-md hover:bg-indigo-600 transition-colors">
                    <i class="fas fa-file-export mr-2"></i>导出数据
                </button>
                <button onclick="refreshData()" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600 transition-colors">
                    <i class="fas fa-sync-alt mr-2"></i>刷新
                </button>
            </div>
            <div class="flex gap-2">
                <input type="text" id="searchKeyword" placeholder="搜索污染类型..." class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <select id="viewMode" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="list">列表视图</option>
                    <option value="tree">树形视图</option>
                </select>
                <select id="activeFilter" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="true">仅显示激活</option>
                    <option value="false">显示全部</option>
                </select>
                <button onclick="searchPollutionTypes()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors">
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 污染类型列表 -->
    <div class="bg-white rounded-lg shadow-md">
        <div class="p-6 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-800">污染类型列表</h3>
        </div>
        <div class="overflow-x-auto">
            <div id="pollutionTypesTableContainer">
                <!-- 表格内容将通过JavaScript动态加载 -->
                <div class="text-center py-12">
                    <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                    <p class="mt-2 text-gray-600">正在加载...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 创建/编辑污染类型模态框 -->
<div id="pollutionTypeModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4" id="modalTitle">新增污染类型</h3>
            <form id="pollutionTypeForm" onsubmit="savePollutionType(event)">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">类型代码 <span class="text-red-500">*</span></label>
                        <input type="text" id="typeCode" name="code" required class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">类型名称 <span class="text-red-500">*</span></label>
                        <input type="text" id="typeName" name="name" required class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">父级类型代码</label>
                        <input type="text" id="parentTypeCode" name="parent_code" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">层级</label>
                        <select id="typeLevel" name="level" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="1">一级分类</option>
                            <option value="2">二级分类</option>
                            <option value="3">三级分类</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">标签分类</label>
                        <input type="text" id="tagCategory" name="tag_category" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">显示名称</label>
                        <input type="text" id="displayName" name="display_name" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">使用范围</label>
                        <textarea id="usageScope" name="usage_scope" rows="2" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">排除范围</label>
                        <textarea id="exclusionScope" name="exclusion_scope" rows="2" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">排序顺序</label>
                        <input type="number" id="sortOrder" name="sort_order" value="0" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <select id="isActive" name="is_active" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="true">激活</option>
                            <option value="false">停用</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">详细说明</label>
                        <textarea id="description" name="description" rows="3" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                    </div>
                </div>
                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" onclick="closePollutionTypeModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition-colors">取消</button>
                    <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 样例管理模态框 -->
<div id="examplesModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-10 mx-auto p-5 border w-11/12 md:w-4/5 lg:w-3/4 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg leading-6 font-medium text-gray-900" id="examplesModalTitle">样例管理</h3>
                <button onclick="closeExamplesModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>

            <!-- 样例列表 -->
            <div class="bg-gray-50 rounded-lg p-4 mb-4">
                <div class="flex justify-between items-center mb-3">
                    <h4 class="font-medium text-gray-800">样例列表</h4>
                    <button onclick="showCreateExampleModal()" class="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600 transition-colors">
                        <i class="fas fa-plus mr-1"></i>新增样例
                    </button>
                </div>
                <div id="examplesList" class="space-y-3 max-h-64 overflow-y-auto">
                    <!-- 样例列表将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 创建/编辑样例模态框 -->
<div id="exampleModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4" id="exampleModalTitle">新增样例</h3>
            <form id="exampleForm" onsubmit="saveExample(event)">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">样例内容 <span class="text-red-500">*</span></label>
                        <textarea id="exampleContent" name="example_content" required rows="4" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入实际的投诉内容样例..."></textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">判断依据</label>
                        <textarea id="judgmentBasis" name="judgment_basis" rows="3" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请说明判断该类型的具体依据..."></textarea>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">关键词</label>
                        <input type="text" id="keywords" name="keywords" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="多个关键词用逗号分隔，如：臭味,刺鼻,异味">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">置信度</label>
                        <input type="number" id="confidenceLevel" name="confidence_level" min="0" max="1" step="0.1" value="0.8" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <select id="exampleIsActive" name="is_active" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="true">激活</option>
                            <option value="false">停用</option>
                        </select>
                    </div>
                </div>
                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" onclick="closeExampleModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition-colors">取消</button>
                    <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 批量创建模态框 -->
<div id="batchCreateModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-10 mx-auto p-5 border w-11/12 md:w-4/5 lg:w-3/4 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">批量创建污染类型</h3>
            <div class="mb-4">
                <p class="text-sm text-gray-600 mb-2">请输入JSON格式的污染类型数据：</p>
                <textarea id="batchCreateData" rows="10" class="w-full border border-gray-300 rounded-md px-3 py-2 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder='[
  {
    "code": "01-01",
    "name": "工业废气污染",
    "parent_code": "01",
    "level": 2,
    "description": "工业生产过程中产生的废气污染"
  }
]'></textarea>
            </div>
            <div class="flex justify-end space-x-3">
                <button onclick="closeBatchCreateModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition-colors">取消</button>
                <button onclick="batchCreatePollutionTypes()" class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors">批量创建</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入Excel模态框 -->
<div id="importModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">导入污染类型数据</h3>
            <form id="importForm" onsubmit="importPollutionTypes(event)">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">选择Excel文件</label>
                    <input type="file" id="importFile" accept=".xlsx,.xls" required class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">支持 .xlsx 和 .xls 格式</p>
                </div>
                <div class="mb-4">
                    <label class="flex items-center">
                        <input type="checkbox" id="clearExisting" class="mr-2">
                        <span class="text-sm text-gray-700">清空现有数据</span>
                    </label>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" onclick="closeImportModal()" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-md hover:bg-gray-400 transition-colors">取消</button>
                    <button type="submit" class="px-4 py-2 bg-purple-500 text-white rounded-md hover:bg-purple-600 transition-colors">开始导入</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 污染类型管理器脚本 -->
